import styles from "./index.module.scss";
import Model1 from "./model1";
import Model2 from "./model2";
import Model3 from "./model3";
import Model4 from "./model4";
import Model5 from "./model5";
import Model6 from "./model6";
import Model7 from "./model7";
import Model8 from "./model8";
import Model9 from "./model9";
import Model10 from "./model10";
import Model11 from "./model11";
import Model12 from "./model12";
import Model13 from "./model13";
import Model14 from "./model14";
import model15 from "./model15";
import Model16 from "./model16";
import Model17 from "./model17";
import Model18 from "./model18";
import Model19 from "./model19";
import Model20 from "./model20";
import Model21 from "./model21";
import Model22 from "./model22";
import Model23 from "./model23";
import Model24 from "./model24";
import Model25 from "./model25";
import Model26 from "./model26";
import Model27 from "./model27";
import Model28 from "./model28";
import Model29 from "./model29";
import Model30 from "./model30";
import Model31 from "./model31";
import Model32 from "./model32";
import { useSelector } from "react-redux";

export default function Layers() {
  const layers = useSelector((state) => {
    return state.layers;
  });

  const com = [
    {
      name: "model1",
      component: Model1,
      title: "无po人员列表",
    },
    {
      name: "model2",
      component: Model2,
      title: "无po产值预警列表",
    },
    {
      name: "model3",
      component: Model3,
      title: "po人员列表",
    },
    {
      name: "model4",
      component: Model4,
      title: "实际开票列表",
    },
    {
      name: "model5",
      component: Model5,
      title: "会务费&差旅费",
    },
    {
      name: "model6",
      component: Model6,
      title: "借款未冲销",
    },
    {
      name: "model7",
      component: Model7,
      title: "借款未冲销金额",
    },
    {
      name: "model8",
      component: Model8,
      title: "项目人员成本",
    },
    {
      name: "model9",
      component: Model9,
      title: "车辆成本列表",
    },
    {
      name: "model10",
      component: Model10,
      title: "塔工成本列表",
    },
    {
      name: "model11",
      component: Model11,
      title: "零星技术服务费成本列表",
    },
    {
      name: "model12",
      component: Model12,
      title: "社保成本列表",
    },
    {
      name: "model13",
      component: Model13,
      title: "劳务成本列表",
    },
    {
      name: "model14",
      component: Model14,
      title: "报销成本列表",
    },
    {
      name: "model15",
      component: model15,
      title: "意外险成本",
    },
    {
      name: "model16",
      component: Model16,
      title: "经营指标信息",
    },
    {
      name: "model17",
      component: Model17,
      title: "人员列表",
    },
    {
      name: "model18",
      component: Model18,
      title: "社保列表",
    },
    {
      name: "model19",
      component: Model19,
      title: "实习生列表",
    },
    {
      name: "model20",
      component: Model20,
      title: "试用期人员列表",
    },
    {
      name: "model21",
      component: Model21,
      title: "异常打卡人员",
    },
    {
      name: "model22",
      component: Model22,
      title: "意外保险参保人员",
    },
    {
      name: "model23",
      component: Model23,
      title: "人员变动列表",
    },
    {
      name: "model24",
      component: Model24,
      title: "黑名单",
    },
    {
      name: "model25",
      component: Model25,
      title: "入离职人员列表",
    },
    {
      name: "model26",
      component: Model26,
      title: "员工岗位",
    },
    {
      name: "model27",
      component: Model27,
      title: "推荐人员列表",
    },
    {
      name: "model28",
      component: Model28,
      title: "无线工程供需情况",
    },
    {
      name: "model29",
      component: Model29,
      title: "意向人员",
    },
    {
      name: "model30",
      component: Model30,
      title: "普查情况",
    },
    {
      name: "model31",
      component: Model31,
      title: "资源池简历情况",
    },
    {
      name: "model32",
      component: Model32,
      title: "简历推送情况",
    }
  ];

  const renderModel = () => {
    let Model = null;
    let name = "";
    for (let i = 0; i < com.length; i++) {
      if (layers.name === com[i].name) {
        Model = com[i].component;
        name = com[i].title;
      }
    }
    return (
      Model && (
        <div className={styles.mask}>
          <Model name={name} />
        </div>
      )
    );
  };

  return <>{renderModel()}</>;
}
